<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Shop.Master" Inherits="Shop.Framework.Page.Register" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	<title>
	Customer Registration
	</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <style type="text/css">
        .registration_wrapper{
            padding: 50px 10px;
            margin: 0 auto;
            width:450px;
            font-size:14px;
            color:#745ccf;
            height:auto;
        }
        
        .reg_form{
            margin:0 auto;
        }
        .registration_input_wrappers{
           padding:6px;
        }
        
        .registration_labels{
            width:150px;
        }
        .registration_inputs{
            border: solid 2px #7adccf;
            width: 200px;
        }
    </style>    
    <script type="text/javascript">
        Registration = new function() {
            this.ValidatePassword = function() {
            var password = $("input[name='Password']").val();
            var confirm = $("input[name='ConfirmPassword']").val();
                if (password == confirm) {
                    return true;
                }
                else {
                    alert("Password does not match..");
                    return false;
                }

            }
        }

        $(document).ready(function() {
            $("input[name='BirthDate']").datepicker();
        });
    </script>
    <div class="registration_wrapper">
        <h3>Customer Registration</h3>
        <form action="/registration/save" class="reg_form" method="post">
            <input type="hidden" name="IdCustomer" value="0" />
            
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">First Name</div>
                <div class="left">
                    <input type="text" name="FirstName" class="registration_inputs" /><b>*</b>
                </div>                
                <div class="clear"></div>
            </div>
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Last Name</div>
                <div class="left">
                    <input type="text" name="LastName" class="registration_inputs" /><b>*</b>
                </div>                
                <div class="clear"></div>
            </div>
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Age</div>
                <div class="left">
                    <input type="text" name="Age" class="registration_inputs" />
                </div>                
                <div class="clear"></div>
            </div>
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Birth Date</div>
                <div class="left">
                    <input type="text" name="BirthDate" class="registration_inputs" /><b>*</b>
                </div>                
                <div class="clear"></div>
            </div>
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Street</div>
                <div class="left">
                    <textarea name="Street" class="registration_inputs" style="height:150px"></textarea><b>*</b>
                </div>                
                <div class="clear"></div>
            </div>
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Zipcode</div>
                <div class="left">
                    <input type="text" name="Zip" class="registration_inputs" /><b>*</b>
                </div>                
                <div class="clear"></div>
            </div>
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">City</div>
                <div class="left">
                    <input type="text" name="City" class="registration_inputs" /><b>*</b>
                </div>                
                <div class="clear"></div>
            </div>
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Country</div>
                <div class="left">
                    <input type="text" name="Country" class="registration_inputs" readonly="readonly" value="Philippines" /><b>*</b>
                </div>                
                <div class="clear"></div>
            </div>
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Email</div>
                <div class="left">
                    <input type="text" name="LoginId" class="registration_inputs" /><b>*</b>
                </div>                
                <div class="clear"></div>
            </div>
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Password</div>
                <div class="left">
                    <input type="password" name="Password" class="registration_inputs" /><b>*</b>
                </div>                
                <div class="clear"></div>
            </div>
            
            <div class="registration_input_wrappers">
                <div class="registration_labels left">Confirm Password</div>
                <div class="left">
                    <input type="password" name="ConfirmPassword" class="registration_inputs" /><b>*</b>
                </div>                
                <div class="clear"></div>
            </div>
            <input type="submit" value="Save Registration Details" onclick="return Registration.ValidatePassword()"/>            
            <%if (ErrorMessage != null) { %>
            <br />
            <span style="color:Red">An error occured:<%=ErrorMessage %></span>
            <%} %>
        </form>
    </div>
</asp:Content>
